<template>
  <div>
    <div ref="jiaoyiduixiang" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getMoneyRankinglistApi,getMoneyPayNumberApi } from "@/api/proofOnly/index";
export default {
    name:'partner',
    props:['payUserList','title','value1','AllTags','dateArray','dateList','default1'],
    data(){
        return{
          numberOffset:1,
          numberLimit:20,
          moneyOffset:1,
          moneyLimit:20,
          keyName:'',
   
        }
    },
    watch: {
      payUserList: function (newVal, oldVal) {
      this.initChart();
    },
  },
    mounted(){
        this.initChart()
    },
    created(){
    
    },
    methods:{
initChart(){
  let that = this;
    var chartDom = this.$refs.jiaoyiduixiang;
    var myChart = echarts.init(chartDom);
    for (let index = 0; index < this.payUserList.length; index++) {
      const element = this.payUserList[index];
      element.cnt = Number(element.cnt);
    }
   let option = {
    title : {
				text : this.title,
				subtext : '',
				left : 'center',
        top:'10px'
			},
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
    formatter: function (params) {
      if(that.title == '交易对象次数'){
        return `交易对象:${params[0].name}<br>交易次数：${params[0].data}`
      }else{
        return `交易对象:${params[0].name}<br>交易金额：${params[0].data}`
      }
        // // 自定义tooltip内容
        // return '自定义Tooltip内容：<br>' +
        //   params[0].name + ': ' + params[0].value;
      }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: [  // 将原来的 xAxis 变为 yAxis
    {
      type: 'category',  // 调整为 category 类型
      data: this.payUserList.map((item) => item.sendernick),
      axisTick: {
        alignWithLabel: true
      },
      inverse: true // 从大到小排列
    }
  ],
  xAxis: [  // 将原来的 yAxis 变为 xAxis
    {
      type: 'value',
    },
    
  ],
  series: [
    {
      name: this.title=='交易对象次数'?'交易次数':'交易金额',
      type: 'bar',
      barWidth: '60%',
      data: this.title=='交易对象次数'?this.payUserList.map((item) => Number(item.cnt)):this.payUserList.map((item) => Number(item.countMoney)),
      itemStyle: {
          color: '#61a0a8' // 设置所有柱状图的颜色为相同的值
        }
    }
  ]
};

// 添加点击事件
myChart.on("click", this.handleChartClick);

option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize(); 
      });
    },
  handleChartClick(params){
    this.keyName = params;
    if(this.title == '交易对象次数'){
      let data = {};
      if(this.default1){
        data = {
        key_name:params.name,
        proof_num: this.value1,
        // key_money: this.AllTags.join(","),
        // key_date: this.dateArray.join(","),
        // key_time: this.dateList.join(","),
        offset:this.numberOffset,
        limit:this.numberLimit
      }
      }else{
       data = {
        key_name:params.name,
        proof_num: this.value1,
        key_money: this.AllTags.join(","),
        key_date: this.dateArray.join(","),
        key_time: this.dateList.join(","),
        offset:this.numberOffset,
        limit:this.numberLimit
      }
      }
      getMoneyRankinglistApi(data).then(res=>{
        // console.log(12)
        this.$parent.getNumberList(res.data,this.payUserList[params.dataIndex].cnt);
        // this.$parent.initOffset()
      }).catch(error=>{

      })
    }else{
      let data = {};
      if(this.default1){
        data = {
        key_name: params.name,
        proof_num: this.value1,
        // key_money: this.AllTags.join(","),
        // key_date: this.dateArray.join(","),
        // key_time: this.dateList.join(","),
        offset:this.moneyOffset,
        limit:this.moneyLimit
      }
      }else{
        data = {
        key_name: params.name,
        proof_num: this.value1,
        key_money: this.AllTags.join(","),
        key_date: this.dateArray.join(","),
        key_time: this.dateList.join(","),
        offset:this.moneyOffset,
        limit:this.moneyLimit
      }
      }
      getMoneyPayNumberApi(data).then(res=>{
        this.$parent.getPayMoney(res.data,this.payUserList[params.dataIndex].cnt)
        // this.$parent.initMoneyOffset()
      }).catch(error=>{

      })
    }
  },
  changeOffsetOrLimit(offset,limit){
    this.numberOffset = offset;
    this.numberLimit = limit;
    let data = {};
      if(this.default1){
        data = {
        key_name:this.keyName.name,
        proof_num: this.value1,
        // key_money: this.AllTags.join(","),
        // key_date: this.dateArray.join(","),
        // key_time: this.dateList.join(","),
        offset:this.numberOffset,
        limit:this.numberLimit
      }
      }else{
        data = {
        key_name:this.keyName.name,
        proof_num: this.value1,
        key_money: this.AllTags.join(","),
        key_date: this.dateArray.join(","),
        key_time: this.dateList.join(","),
        offset:this.numberOffset,
        limit:this.numberLimit
      }
      }
      getMoneyRankinglistApi(data).then(res=>{
        this.$parent.getNumberList(res.data,this.payUserList[this.keyName.dataIndex].cnt);
      }).catch(error=>{

      })
  },
  changeMoneyOffsetOfLimit(offset,limit){
    this.moneyOffset = offset;
    this.moneyLimit = limit;
    let data = {};
    if(this.default1){
      data = {
        key_name: this.keyName.name,
        proof_num: this.value1,
        // key_money: this.AllTags.join(","),
        // key_date: this.dateArray.join(","),
        // key_time: this.dateList.join(","),
        offset:this.moneyOffset,
        limit:this.moneyLimit
      }
    }else{
      data = {
        key_name: this.keyName.name,
        proof_num: this.value1,
        key_money: this.AllTags.join(","),
        key_date: this.dateArray.join(","),
        key_time: this.dateList.join(","),
        offset:this.moneyOffset,
        limit:this.moneyLimit
      }
    }
    // let data = {
    //     key_name: this.keyName.name,
    //     proof_num: this.value1,
    //     key_money: this.AllTags.join(","),
    //     key_date: this.dateArray.join(","),
    //     key_time: this.dateList.join(","),
    //     offset:this.moneyOffset,
    //     limit:this.moneyLimit
    //   }
      getMoneyPayNumberApi(data).then(res=>{
        this.$parent.getPayMoney(res.data,this.payUserList[this.keyName.dataIndex].cnt)
      }).catch(error=>{

      })
  }
    }
}
</script>

<style>

</style>